<!DOCTYPE html>
<html>
    <head>
        <title>Upload Files using XMLHttpRequest - Minimal</title>
        <style type="text/css">
            body{font-size:12px; line-height: 21px;}
            button{ padding:5px 10px;}
        </style>
        <script type="text/javascript">
            // 2016-12-15
            function fileSelected() {
                var file = document.getElementById('fileToUpload').files[0];
                if (file) {
                    var fileSize = 0;
                    if (file.size > 1024 * 1024)
                        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                    else
                        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                    document.getElementById('fileName').innerHTML = '文件名: ' + file.name;
                    document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;
                    document.getElementById('fileType').innerHTML = '文件类型: ' + file.type;
                }
            }

            function uploadFile() {
                var fd = new FormData();
                fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.addEventListener("error", uploadFailed, false);
                xhr.addEventListener("abort", uploadCanceled, false);
                xhr.open("POST", document.forms[0].action);
                xhr.send(fd);
            }

            function uploadProgress(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
                } else {
                    document.getElementById('progressNumber').innerHTML = 'unable to compute';
                }
            }

            function uploadComplete(evt) {
                /* This event is raised when the server send back a response */
                var debug = 'Y' == document.getElementById('debug').value; // the name of the textbox element
                var sresult = evt.target.responseText;
                if (debug) {
                    console.log(sresult);
                }
                var oresult = new Function("return " + sresult)();
                if (oresult.error) {
                    alert(oresult.message);
                } else {
                    var name = document.getElementById('name').value; // the name of the textbox element
                    var callback = document.getElementById('callback').value; // the callback function in parent window.
                    if (debug) {
                        console.log(oresult);
                        console.log(callback + '::' + window.parent[callback]);
                    }

                    if (window.parent[callback]) {
                        window.parent[callback](name, oresult.url);
                    }
                }
            }

            function uploadFailed(evt) {
                alert("There was an error attempting to upload the file.");
            }

            function uploadCanceled(evt) {
                alert("The upload has been canceled by the user or the browser dropped the connection.");
            }
        </script>
        <script type="text/javascript">
            // ==========================父窗体操作示例代码===========
            // HTML代码
            // 图片：<input type="text" name="img_url" /><a id="img_url_upfile" href=":url('UploadHandler/single_upload','name=img_url')">[选择文件...]</a>
            // 
            //$('#img_url_upfile').click(function () {
            //    $('<iframe src="' + $(this).attr('href') + '" style="width:600px; height:200px;"></iframe>').dialog({'title': '文件上传'});
            //    return false;
            //});
            // 父窗体callback函数示例 2016-12-15
            function demo_upload_cb(name, value) {
                $('[name="' + name + '"]').val(value);
                $('iframe').dialog('close');
            }
        </script>
    </head>
    <body>
        <form enctype="multipart/form-data" method="post" action="{:url('kindeditor_upload')}">
            <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
            <div style="border:solid 1px #CCC; border-radius: 5px; color:#555; margin:5px 0; padding:5px;">
                <div id="fileName"></div>
                <div id="fileSize"></div>
                <div id="fileType"></div>
                <div id="progressNumber"></div>
            </div>
            <div style="text-align: right; margin-top:5px;">
                <button type="button" onclick="uploadFile()">立即上传</button>
            </div>
        </form>
        <input type="hidden" id="callback" value="{$callback}" data-value="single_uploader_cb" />
        <input type="hidden" id="name" value="{$name}" data-value="picture_url" />
        <input type="hidden" id="debug" value="{$debug}" data-value="Y" />
    </body>
</html>